import {Component, OnInit} from "@angular/core";
import {DataDataSource} from "../bill-result/bill-result.component";
import {NbDateService} from "@nebular/theme";
import {UserService} from "../../UserService";
import {BillService} from "../../energy/api";

@Component({
  template: `
      <div class="row">
          <div class="col-md-6">
              <nb-card>
                  <nb-card-header>账户充值</nb-card-header>
                  <nb-card-body>
                      <nb-list>
                          <nb-list-item>
                              <p>账户余额</p>
                              <div class="list-icon">
                                  0
                                  <i class="fa fa-yen-sign"></i>
                              </div>
                          </nb-list-item>
                          <nb-list-item>
                              <p>充值</p>
                              <input nbInput placeholder="充值金额" [(ngModel)]="money">
                              &nbsp;
                              <i class="fa fa-yen-sign"></i>
                          </nb-list-item>
                          <nb-list-item>
                              <nb-radio-group [(value)]="payOption">
                                  <nb-radio value="1">支付宝</nb-radio>
                                  <nb-radio value="2">微信</nb-radio>
                              </nb-radio-group>
                          </nb-list-item>
                      </nb-list>
                  </nb-card-body>
                  <nb-card-footer>
                      <button nbButton (click)="submit()">确定</button>
                  </nb-card-footer>
              </nb-card>
          </div>
          <div class="col-md-6">
              <nb-alert status="danger" *ngIf="failed">
                  {{failedMsg}}
              </nb-alert>
              <nb-card *ngIf="showQCode">
                  <nb-card-header>扫码支付</nb-card-header>
                  <nb-card-body style="text-align: center;min-height:377px">
                      <p>支付成功前请不要刷新次页面</p>
                      <img src="/assets/images/qrcode.png">
                  </nb-card-body>
              </nb-card>
          </div>
      </div>
      <nb-card>
          <nb-card-header>充值历史</nb-card-header>
          <nb-card-body>
              <ng2-smart-table [settings]="settings" [source]="source">
              </ng2-smart-table>
          </nb-card-body>
      </nb-card>
  `
})
export class UserChargeComponent implements OnInit {
  settings = {
    pager:{
      display:true,
      perPage:10
    },
    hideSubHeader: true,
    actions: {
      add:false,
      edit:false,
      delete: false,
      columnTitle: '操作',
      position: 'right',
    },
    columns: {
      billNo: {
        title: '账单编号',
        type: 'string',
      },
      billAmt: {
        title: '缴费金额',
        type: 'string',
      },
      billDate: {
        title: '缴费日期',
        type: 'string',
      },
      remark:{
        title: '标注',
        type: 'string',
      },
      extInfo: {
        title: '额外信息',
        type: 'string',
      },
    },
  };
  payOption = 1;
  showQCode = false;
  source:DataDataSource;
  money:number;
  failed:boolean = false;
  failedMsg = '';
  startTime:Date;
  endTime:Date;
  constructor(private dateService: NbDateService<Date>,private userService:UserService,private api:BillService){
    this.startTime = this.dateService.addDay(this.dateService.today(), -5);
    this.endTime = this.dateService.today();
    this.source = new DataDataSource(this.api,this.dateService,this.startTime,this.endTime,null,this.userService.getUser().unitId);
  }
  ngOnInit(): void {

  }

  submit(){
    if( this.money==null || this.money<=0){
      this.failed = true;
      this.failedMsg = '请填写金额';
      return;
    }
    this.failed = false;
    this.showQCode = true;
  }
}
